<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .panel {
      position: fixed;
      z-index: 10000000;
      top: 0;
      right: 0;
      width: 300px;
      height: 100vh;
      background: #f8f9fa;
      border-left: 1px solid gainsboro;
      user-select: none;
      padding: 5px;
      overflow-y:scroll;
    }
    .panel::-webkit-scrollbar{
      width: 0px;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
</head>

<body>
  <div class="panel">
    <div class="pos-f-t">
      <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
          <h5 class="text-white h4">深度翻译器</h5>
          <a class="text-primary" style="display: block;">前往GitHub</a>
          <a class="text-primary style=" display: block;">前往Gitee</a>
        </div>
      </div>
      <nav class="navbar navbar-dark bg-dark">
        <span class="navbar-toggler-icon" data-toggle="collapse" data-target="#navbarToggleExternalContent"
          aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"></span>
        <span class="text-white-50">×</span>
      </nav>
    </div>
    <ul style="margin-top:5px;" class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item ">
        <a class="nav-link active text-dark" id="fanyi-tab" data-toggle="tab" href="#fanyi" role="tab" aria-controls="fanyi" aria-selected="true">翻译</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-dark" id="config-tab" data-toggle="tab" href="#config" role="tab" aria-controls="home" aria-selected="false">配置</a>
      </li>
    </ul>
    <div class="tab-content">
      <div style="padding:5px;" class="bg-white tab-pane fade show active" id="fanyi" role="tabpanel"
      aria-labelledby="fanyi-tab">
      <form>
        <div class="form-group">
          <textarea id="transText" class="form-control" aria-label="With textarea" rows="8" placeholder="请填入一句话"></textarea>
        </div>
          <button type="button" class="btn btn-outline-dark  btn-block">翻译</button>
        </form>
      </div>
      <div style="padding-top:5px;" class="bg-white tab-pane fade active" id="config" role="tabpanel"
        aria-labelledby="config-tab">
        <form action="#" id="deep-config">
          <div class="form-group">
            <label for="isAuto">是否自动翻译页面</label>
            <select class="form-control" id="isAuto" name="isAuto">
              <option value="0">否</option>
              <option value="1">是</option>
            </select>
          </div>
          <div class="form-group">
            <label for="transEngine">翻译引擎</label>
            <select class="form-control" id="transEngine" name="transEngine">
              <option value="ge">谷歌</option>
              <option value="yd">有道</option>
            </select>
          </div>
          <div class="form-group">
            <label for="transOrigLang">源语言</label>
            <select class="form-control" id="transOrigLang">
              <option>自动</option>
              <option>中文简体</option>
              <option>英文</option>
            </select>
          </div>
          <div class="form-group">
            <label for="transTargetLang">目标语言</label>
            <select class="form-control" id="transTargetLang">
              <option>中文简体</option>
              <option>英文</option>
            </select>
          </div>
          <div class="form-group">
            <label for="ignoreWork">忽略的单词（每行一个）</label>
            <textarea class="form-control" id="ignoreWork"></textarea>
          </div>
          <div class="form-group">
            <label for="ignoreElement">忽略的元素（每行一个，JQ定位）</label>
            <textarea class="form-control" id="ignoreElement"></textarea>
          </div>
          <div class="form-group">
            <label for="replaceWork">翻译前替换（格式:RegExp>字符串）</label>
            <textarea placeholder="" class="form-control" id="replaceWork" name="replaceWork"></textarea>
          </div>
          <button type="submit" class="btn btn-outline-dark btn-block">应用</button>
        </form>
      </div>
    </div>
  </div>
  </div>
</body>
<script>
  (()=>{
    $('#deep-config').on('submit',(e)=>{  

      console.log(e,e.target[0].name);
      return false;
    });
  })()
</script>
</html>